<template>
  <view>
    <view class="map-box w-full" style="height: 700rpx">
      <map :scale="12" :polyline="state.polyline" :markers="state.markers" :longitude="state.markers.length === 0 ? 116.41 : state.markers[0].longitude" :latitude="state.markers.length === 0 ? 39.9 : state.markers[0].latitude" class="w-full h-full" />
      <view class="timeSelect" @click="state.timeShow = true">
        <view>
          <van-icon name="sort" />
          {{ state.currentDate }}
        </view>
      </view>
    </view>
    <view class="title my-2 px-2 box-border c-text-16 flex items-center"> <i class="i-basil:location-solid c-text-16 mr-1 c-color"></i>全天足迹 </view>
    <view class="mapList">
      <van-cell-group>
        <van-cell v-for="(item, index) in state.stateList" :title="item.address" :value="item.createDate" :key="index" />
      </van-cell-group>
    </view>
    <van-popup position="bottom" custom-style="height: 40%;" :show="state.timeShow" @close="onClose">
      <van-datetime-picker title="选择日期" @cancel="onClose" type="date" @confirm="onTimeConfirm" />
    </van-popup>
  </view>
</template>

<script setup lang="ts">
import Tools from '@/utils/tools';
import EquipRequest from '@/request/equipRequest';

interface IState {
  equipId: number;
  pages: {
    pageNo: number;
    pageSize: number;
    totalPage: number;
  };
  stateList: IFootPrintList[];
  timeShow: boolean;
  currentDate: string;
  polyline: {
    points: any;
    color: string;
    width: number;
    arrowLine: boolean;
    borderWidth: number;
    borderColor: string;
  }[];
  markers: {
    id: number;
    longitude: string;
    latitude: string;
    width: number;
    height: number;
    callout: {
      bgColor: string;
      borderColor: string;
      borderRadius: number;
      borderWidth: number;
      color: string;
      display: string;
      fontSize: number;
      padding: number;
      textAlign: string;
      content: string;
    };
  }[];
}

const state = reactive<IState>({
  pages: {
    pageNo: 1,
    pageSize: 10,
    totalPage: 0,
  },
  stateList: [],
  timeShow: false,
  currentDate: '',
  markers: [],
  polyline: [
    {
      points: [],
      color: '#2ecc71',
      width: 2,
      arrowLine: true,
      borderWidth: 2,
      borderColor: '#000',
    },
  ],
  equipId: 0,
});

onLoad((options) => {
  state.currentDate = Tools.formatTimeStringToDate(String(new Date()));
  if (options) {
    state.equipId = options.equipId;
    getFootPrintList();
  }
});

const onTimeConfirm = (event: any) => {
  const { year, month, day } = Tools.formatTimestampToDate(event.detail);
  state.currentDate = year + '-' + month + '-' + day;
  onClose();
  getFootPrintList();
};

const onClose = () => {
  state.timeShow = false;
};

const getFootPrintList = () => {
  EquipRequest.GetFootPrintList({
    equipId: state.equipId,
    date: state.currentDate,
  }).then((res) => {
    if (res.status === 0) {
      let resD = res.data;
      if (resD.length > 0) {
        let arr = resD.map((item) => {
          return {
            latitude: item.latitude,
            longitude: item.longitude,
          };
        });
        const commonCallout = {
          bgColor: '#ffffff',
          borderColor: '',
          borderRadius: 10,
          borderWidth: 2,
          color: '#00a9e3',
          display: 'ALWAYS',
          fontSize: 14,
          padding: 3,
          textAlign: 'center',
        };
        const markers = [
          {
            id: 1,
            longitude: arr[0].longitude,
            latitude: arr[0].latitude,
            width: 26,
            height: 30,
            callout: {
              ...commonCallout,
              content: '起点',
            },
          },
          {
            id: 2,
            longitude: arr[arr.length - 1].longitude,
            latitude: arr[arr.length - 1].latitude,
            width: 26,
            height: 30,
            callout: {
              ...commonCallout,
              content: '终点',
            },
          },
        ];
        state.stateList = res.data;
        state.polyline[0].points = arr;
        state.markers = markers;
      } else {
        state.stateList = [];
        state.polyline[0].points = [];
        state.markers = [];
      }
    }
  });
};

onLoad((options) => {
  state.currentDate = Tools.formatTimeStringToDate(String(new Date()));
  if (!options) return;
  state.equipId = options.equipId;
  getFootPrintList();
});
</script>

<style lang="scss" scoped>
.timeSelect {
  position: fixed;
  top: 30rpx;
  left: 50%;
  padding: 10rpx 20rpx;
  font-size: 30rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-sizing: border-box;
  transform: translateX(-50%);
}
</style>
